<template>
  <div class="div-wrapper">
    <div class="container">
      <div class="title">
        {{$store.state.language === 'zh-CN' ? "成果展示" : "Platform"}}
      </div>
      <div v-if="$store.state.language === 'zh-CN'" class="content ql-editor" v-html="contentPlatform">
        {{contentPlatform}}
      </div>
      <div v-else class="content ql-editor" v-html="enContentPlatform">
        {{enContentPlatform}}
      </div>

      <div class="title">
        {{$store.state.language === 'zh-CN' ? "发明专利" : "Patent"}}
      </div>
      <div v-if="$store.state.language === 'zh-CN'" class="content ql-editor" v-html="contentPatent">
        {{contentPatent}}
      </div>
      <div v-else class="content ql-editor" v-html="enContentPatent">
        {{enContentPatent}}
      </div>

      <div class="title">
        {{$store.state.language === 'zh-CN' ? "软件著作权" : "Software Copyright"}}
      </div>
      <div v-if="$store.state.language === 'zh-CN'" class="content ql-editor" v-html="contentCopyright">
        {{contentCopyright}}
      </div>
      <div v-else class="content ql-editor" v-html="enContentCopyright">
        {{enContentCopyright}}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import $api from '../../api';
import { Loading , Notification} from 'element-ui';

@Component
export default class Patent extends Vue{
  private contentPlatform: string = '';
  private enContentPlatform: string = '';
  private targetNamePlatform: string = 'succ_result';
  private contentPatent: string = '';
  private enContentPatent: string = '';
  private targetNamePatent: string = 'succ_patent';
  private contentCopyright: string = '';
  private enContentCopyright: string = '';
  private targetNameCopyright: string = 'succ_copyright';

  private mounted() {
    this.getContent();
  }
  private getContent() {
    const loadInstance = Loading.service({target: '.ql-editor'});
    $api.module.findContentByName(this.targetNamePlatform)
        .then((res) => {
          this.contentPlatform = (res as any).content;
          loadInstance.close();
        }).catch((error) => {
      loadInstance.close();
      Notification({
        title: '网络异常',
        message: error,
        type: 'error',
      });
    })
    $api.module.findContentByName('en_' + this.targetNamePlatform)
        .then((res) => {
          this.enContentPlatform = (res as any).content;
        })

    $api.module.findContentByName(this.targetNamePatent)
        .then((res) => {
          this.contentPatent = (res as any).content;
          loadInstance.close();
        }).catch((error) => {
      loadInstance.close();
      Notification({
        title: '网络异常',
        message: error,
        type: 'error',
      });
    })
    $api.module.findContentByName('en_' + this.targetNamePatent)
        .then((res) => {
          this.enContentPatent = (res as any).content;
        })

    $api.module.findContentByName(this.targetNameCopyright)
        .then((res) => {
          this.contentCopyright = (res as any).content;
          loadInstance.close();
        }).catch((error) => {
      loadInstance.close();
      Notification({
        title: '网络异常',
        message: error,
        type: 'error',
      });
    })
    $api.module.findContentByName('en_' + this.targetNameCopyright)
        .then((res) => {
          this.enContentCopyright = (res as any).content;
        })
  }
}
</script>